<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../../../../lib/go.js" ></script>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #myDiagramDiv {
            height: 90%;
            width: 100%;
            border: none;
        }
    </style>
</head>
<body>
<div id="myDiagramDiv"></div>

<script type="application/javascript">
     var $ = go.GraphObject.make;

     myDiagram =
        $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
          {
            initialAutoScale: go.Diagram.Uniform,
              allowCopy: false,
            allowDelete: false,
            allowMove: false,
            maxSelectionCount: 1, // users can select only one part at a time
            validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees
            layout:
              $(go.TreeLayout,
                {
                  treeStyle: go.TreeLayout.StyleLastParents,
                  arrangement: go.TreeLayout.ArrangementHorizontal,
                  // properties for most of the tree:
                  angle: 90,
                  layerSpacing: 35,
                  // properties for the "last parents":
                  alternateAngle: 90,
                  alternateLayerSpacing: 35,
                  alternateAlignment: go.TreeLayout.AlignmentBus,
                  alternateNodeSpacing: 20
                }),
            "undoManager.isEnabled": true // enable undo & redo
          });



      // when a node is double-clicked, add a child to it
      function nodeDoubleClick(e, obj) {
        var clicked = obj.part;
        if (clicked !== null) {
          var thisemp = clicked.data;
         console.log(thisemp);
        }
      }

      // This function provides a common style for most of the TextBlocks.
      // Some of these values may be overridden in a particular TextBlock.
      function textStyle() {
        return { font: "14px  Odoo Unicode Support Noto,Lucida Grande,Helvetica, Verdana, Arial, sans-serif",
            stroke: "#4c4c4c" };
      }

      function titleTextStyle() {
        return { font: "bold 14px  Odoo Unicode Support Noto,Lucida Grande,Helvetica, Verdana, Arial, sans-serif",
            stroke: "#4c4c4c" };
      }

      // This converter is used by the Picture.
      function findHeadShot(key) {
        return "http://127.0.0.1:8069/web/image?model=hr.employee.public&id=3&field=image_1920&unique=20210810165116";
      }

      // define the Node template
      // myDiagram.nodeTemplate =
     var companyNode = $(go.Node, 'Vertical',
         $(go.Panel, "Auto",
         { doubleClick: nodeDoubleClick },
          $(go.Shape, "Rectangle",
            {
              name: "SHAPE", fill: "white", stroke: "#AC193D", strokeWidth: 1,
              cursor: "pointer"
            }),
             $(go.TextBlock, titleTextStyle(),  // the name
                {
                  name: "NAMETB",
                  row: 0, column: 0, columnSpan: 5,
                  font: "12pt Segoe UI,sans-serif",
                  isMultiline: false,
                  minSize: new go.Size(10, 16),
                    margin: new go.Margin(20, 40, 20, 40)
                },
                new go.Binding("text", "name").makeTwoWay()),
        ),
         $(go.Panel,  // this is underneath the "BODY"
            { height: 17 },  // always this height, even if the TreeExpanderButton is not visible
            $("TreeExpanderButton")
          )
     );

      var departmentNode = $(go.Node, 'Vertical',
        $(go.Panel, "Auto",
          { doubleClick: nodeDoubleClick },
          $(go.Shape, "Rectangle",
            {
              name: "SHAPE", fill: "white", stroke: "#2672EC", strokeWidth: 1,
              cursor: "pointer"
            }),
          $(go.Panel, "Horizontal",
            $(go.Panel, "Table",
              {
                maxSize: new go.Size(150, 999),
                margin: new go.Margin(18, 30, 18, 30),
                defaultAlignment: go.Spot.Left
              },
              $(go.RowColumnDefinition, { column: 2, width: 4 }),
              $(go.TextBlock, titleTextStyle(),  // the name
                {
                  name: "NAMETB",
                  row: 0, column: 0, columnSpan: 5,
                  font: "12pt Segoe UI,sans-serif",
                  isMultiline: false,
                  minSize: new go.Size(10, 16)
                },
                new go.Binding("text", "name").makeTwoWay()),
              $(go.TextBlock, "责任人: ", textStyle(),
                { row: 1, column: 0 }),
              $(go.TextBlock, textStyle(),
                {
                  row: 1, column: 1, columnSpan: 4,
                  editable: true, isMultiline: false,
                  minSize: new go.Size(10, 14),
                  margin: new go.Margin(0, 0, 0, 3)
                },
                new go.Binding("text", "user_id").makeTwoWay())
            )  // end Table Panel
          ) // end Horizontal Panel
        ), // end Node
          $(go.Panel,  // this is underneath the "BODY"
            { height: 17 },  // always this height, even if the TreeExpanderButton is not visible
            $("TreeExpanderButton")
          )
      );

      var commoneNode = $(go.Node, 'Vertical',
        $(go.Panel, "Auto",
          { doubleClick: nodeDoubleClick },
          $(go.Shape, "Rectangle",
            {
              name: "SHAPE", fill: "white", stroke: "#dee2e6", strokeWidth: 1,
              cursor: "pointer"
            }),
          $(go.Panel, "Horizontal",
            $(go.Picture,
              {
                name: "Picture",
                desiredSize: new go.Size(39, 39),
                margin: new go.Margin(6, 8, 6, 8),
              },
              new go.Binding("source", "key", findHeadShot)),
            // define the panel where the text will appear
            $(go.Panel, "Table",
              {
                maxSize: new go.Size(150, 999),
                margin: new go.Margin(6, 10, 0, 3),
                defaultAlignment: go.Spot.Left
              },
              $(go.RowColumnDefinition, { column: 2, width: 4 }),
              $(go.TextBlock, titleTextStyle(),  // the name
                {
                  name: "NAMETB",
                  row: 0, column: 0, columnSpan: 5,
                  font: "12pt Segoe UI,sans-serif",
                  isMultiline: false,
                  minSize: new go.Size(10, 16)
                },
                new go.Binding("text", "name").makeTwoWay()),
              $(go.TextBlock, "Title: ", titleTextStyle(),
                { row: 1, column: 0 }),
              $(go.TextBlock, textStyle(),
                {
                  row: 1, column: 1, columnSpan: 4,
                  editable: true, isMultiline: false,
                  minSize: new go.Size(10, 14),
                  margin: new go.Margin(0, 0, 0, 3)
                },
                new go.Binding("text", "title").makeTwoWay()),
              $(go.TextBlock, textStyle(),
                { row: 2, column: 0 },
                new go.Binding("text", "key", function(v) { return "ID: " + v; })),
              $(go.TextBlock, textStyle(),
                { name: "boss", row: 2, column: 3, }, // we include a name so we can access this TextBlock when deleting Nodes/Links
                new go.Binding("text", "parent", function(v) { return "Boss: " + v; })),
              $(go.TextBlock, textStyle(),  // the comments
                {
                  row: 3, column: 0, columnSpan: 5,
                  font: "italic 9pt sans-serif",
                  wrap: go.TextBlock.WrapFit,
                  editable: true,  // by default newlines are allowed
                  minSize: new go.Size(10, 14)
                },
                new go.Binding("text", "comments").makeTwoWay())
            )  // end Table Panel
          ) // end Horizontal Panel
        ), // end Node
          $(go.Panel,  // this is underneath the "BODY"
            { height: 17 },  // always this height, even if the TreeExpanderButton is not visible
            $("TreeExpanderButton")
          )
      );

      myDiagram.nodeTemplateMap.add("Department", departmentNode);
      myDiagram.nodeTemplateMap.add("Company", companyNode);
      myDiagram.nodeTemplateMap.add("", commoneNode);

      // define the Link template
      myDiagram.linkTemplate =
        $(go.Link, go.Link.Orthogonal,
          { corner: 5, deletable: false},
          $(go.Shape, { strokeWidth: 2, stroke: "#424242" }));  // the link shape


    var data = { "class": "go.TreeModel",
  "nodeDataArray": [
      {"category": "Company", "key": 0, "name": "总部"},
      {"category": "Department", "key": 1000, "name": "部门1", "parent": 0, "user_id": "张三"},
      {"category": "Department", "key": 1001, "name": "部门2", "parent": 0, "user_id": "李四"},
      {"category": "Department", "key": 1002, "name": "部门3", "parent": 1001, "user_id": "玩儿码"},
      {"category": "Company", "key": 2000, "name": "分子公司1", "parent": 0},
      {"category": "Department", "key": 2001, "name": "分部门1", "parent": 2000, "user_id": "张三1"},
      {"category": "Department", "key": 2002, "name": "分部门2", "parent": 2000, "user_id": "李四1"},
{"key":1, "name":"Stella Payne Diaz", "title":"CEO", 'comments': "好的", "isSelected": true, "parent": 1000},
{"key":2, "name":"Luke Warm", "title":"VP Marketing/Sales", "parent":2001},
{"key":3, "name":"Meg Meehan Hoffa", "title":"Sales", "parent":2001},
{"key":4, "name":"Peggy Flaming", "title":"VP Engineering", "parent":2001},
{"key":5, "name":"Saul Wellingood", "title":"Manufacturing", "parent":2002},
{"key":6, "name":"Al Ligori", "title":"Marketing", "parent":1001},
{"key":7, "name":"Dot Stubadd", "title":"Sales Rep", "parent":1001},
{"key":8, "name":"Les Ismore", "title":"Project Mgr", "parent":1001},
{"key":9, "name":"April Lynn Parris", "title":"Events Mgr", "parent":1001},
{"key":10, "name":"Xavier Breath", "title":"Engineering", "parent":1000},
{"key":11, "name":"Anita Hammer", "title":"Process", "parent":1000},
{"key":12, "name":"Billy Aiken", "title":"Software", "parent":1000},
{"key":13, "name":"Stan Wellback", "title":"Testing", "parent":1000},
{"key":14, "name":"Marge Innovera", "title":"Hardware", "parent":2002},
{"key":15, "name":"Evan Elpus", "title":"Quality", "parent":1002},
{"key":16, "name":"Lotta B. Essen", "title":"Sales Rep", "parent":1002}
 ]
};
    myDiagram.model = go.Model.fromJson(data);


</script>
</body>
</html>